<template>
<div class="edit">
<el-form :model="formData" ref="form" :rules="rules" size="mini">
    <el-form-item label="供应商名称" prop="cmpName" :label-width="formLabelWidth">
      <el-input v-model="formData.cmpName" :disabled="true" ></el-input>
    </el-form-item>
    <el-form-item label="管理员账号" prop="usrCode" :label-width="formLabelWidth">
      <el-input v-model="formData.usrCode" autocomplete="off" maxlength="50" ></el-input>
    </el-form-item>
    <el-form-item label="管理员名称" prop="usrName" :label-width="formLabelWidth">
      <el-input v-model="formData.usrName" autocomplete="off" maxlength="25" ></el-input>
    </el-form-item>
    <el-form-item label="联系电话" prop="usrCellphone" :label-width="formLabelWidth">
      <el-input v-model="formData.usrCellphone" autocomplete="off" ></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="usrEmail" :label-width="formLabelWidth">
      <el-input v-model="formData.usrEmail" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="状态" prop="usrStatus" :label-width="formLabelWidth">
      <el-select v-model="formData.usrStatus" placeholder="请选择状态">
        <el-option
            v-for="item in status"
            :key="item.uuid"
            :label="item.names"
            :value="item.code"
          ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="备注"  prop="remark" :label-width="formLabelWidth">
      <el-input v-model="formData.remark" type="textarea" autocomplete="off" maxlength="150" show-word-limit></el-input>
    </el-form-item>
  </el-form>
 <div slot="footer" class="dialog-footer">
    <el-button size="mini" @click="cancel">关 闭</el-button>
    <el-button size="mini" type="primary" @click="save">确 定</el-button>
  </div>
  </div>
</template>
<script>
export default{
  mounted(){
    // console.log(this.formData,42);
    // this.form=JSON.parse(JSON.stringify(this.formData));
    // console.log(this.form,22222)
  },
  props:{formData:
       {type: Object,
         required: true}},
  data(){
    return{
      // form:{
      //   cmpName:'',
      //   usrCode:'',
      //   usrName:'',
      //   usrCellphone:'',
      //   usrEmail:'',
      //   remark:'',
      //   usrStatus:'',
      //   lastModifier:'',
      //   fltUuid:'',
      //   UUID:''
      // },
      form:this.formData,
      rules:{
        cmpName:[{required:true,message:'请输入供应商名称',trigger:['blur','change']}],
        usrCode:[{required:true,message:'请输入管理员账号',trigger:['blur','change']},
          {max:50,message:'输入字符请不要超过50个字段',trigger:['blur','change']}],
        usrName:[{required:true,message:'请输入管理员名称',trigger:['blur','change']},
          {max:25,message:'输入字符请不要超过25个字段',trigger:['blur','change']}],
        // usrCellphone:[{pattern:/^[1][3,4,5,6,7,8,9][0-9]{9}$/,message:'请输入11位手机号码',trigger:['blur']}],
        usrCellphone:[{pattern:/^\d+$/,message:'请输入数字号码',trigger:['blur']}],
        usrEmail:[{pattern:/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/,message:'请输入邮箱账号',trigger:['blur']},
          {max:90,message:'输入不能超过90个字符',trigger:['blur','change']}],
        usrStatus:[{required:true,message:'请选择状态',trigger:['blur','change']}],
        remark:[{max:150,message:'输入不能超过150个字段',trigger:['blur','change']}]
      },
      status:[{names:'可用',uuid:'1',code:'Y'},{names:'不可用',uuid:'2',code:'N'}],
      formLabelWidth:'120px',
      //lastModifier:this.$store.state.user.USERNAME_DX_H,
    }

  },
  methods:{
    //取消编辑
    cancel(){
      // this.form=JSON.parse(JSON.stringify(this.formData));
      // this.form='';
      this.$emit('cancel')

    },
    //保存编辑
    save(){
      console.log(this.formData)
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('edit',this.formData)

        }
      })
      // this.$emit('edit',this.form);
    }
  }

}
</script>
<style lang="scss" scoped>
.edit{
  overflow:hidden;
  padding-top:15px;
  .dialog-footer{
    float:right;
  }

}
</style>>
